<template>
	<el-dialog
	  top="35vh"
	  :visible.sync="fdDialog"
	  width="300px"
	  class="feedback">
		<h3 class="title">{{options.title}}</h3>
		<div center class="fd-switch clearfix" v-if="options.noNav">
			<template v-for="(item,index) in switchs">
				<span :class="{active:cur == index}" @click="choice(index)">{{item.name}}</span>
			</template>
		</div>
		<div class="fd-textarea">
			<el-input
			  type="textarea"
			  placeholder="请输入内容"
			  v-model="form.textarea"
			  maxlength="100"
			  :autosize="{ minRows: 4, maxRows: 4}"
			  show-word-limit
			>
			</el-input>
		</div>
		<div class="fd-submit" @click="$emit(options.eventName,form)">确定</div>
	</el-dialog>
</template>

<script>
export default{
	props:{
		options:{
			type:Object,
			require:true
		}
	},
	data(){
		return {
			fdDialog:false,
			cur:0,
			switchs:[
				{name:'预约成功'},
				{name:'预约失败'}
			],
			form:{
				textarea: '',
				navName: '预约成功'
			}
			
		}
	},
	created(){
		if(this.options.noNav == false){
			this.$delete(this.form,'navName');
		}
	},
	methods:{
		open(){
			this.fdDialog = true;
			this.form.textarea = '';
		},
		close(){
			this.fdDialog = false;
		},
		choice(index){
			this.cur = index;
			this.form.navName = this.switchs[index].name;
		}
	}
}
</script>

<style scoped="scoped">
.feedback .title{
	padding: 10px 0;
	text-align: center;
	font-size: 13px;
	font-weight: bold;
	line-height: 20px;
}
.fd-switch{
	margin: 10px 0 20px 22px;
}
.fd-switch span{
	float: left;
	margin: 0 10px;
	border-radius: 4px;
	font-size: 12px;
	background-color: #F5F5F5;
	padding: 10px 30px;
	color: #000;
}
.fd-switch .active{
	color: #fff;
	background-color: #FF0000;
}
.fd-textarea{
	margin: 10px 32px;
}
.fd-submit{
	width: 236px;color: #fff;
	margin: 10px 32px;
	background-color: #FF0000;
	padding: 10px 0;font-size: 12px;
	border-radius: 16px;
	text-align: center;
	display: inline-block;
}
</style>
